/**
 * Search control
 * DESCRIPTION:
 * This class uses an ajax call to retrieve search results and display them.  
 * When data is typed in to the input field, it is sent to search.php and the 
 * responce is displayed in the output div (aligned below the input).  The class
 * automatically imports its css styling from search.css.
 * 
 * FUNCTIONALITY:
 * The search control automatically checks the specified input value for fields in 
 * the database that match.  The results are returned and displayed underneath 
 * the specified input.  When the results are clicked on, the user will be redirected
 * to that event page or if the user presses enter, they will be redirected to a 
 * search result page.
 * 
 * USE:
 * To use the search control first inport UTSDK.js into the HTML page.  This will
 * automatically include UTSDK.search.  The search control is created by calling 
 * new search(input, container): where input is where the search results will be 
 * filtered and container is the container that will house the results (optional). 
 * 
 * VERSIONING:
 * v1.0 - Created search control
 * v1.1 - Made search result that are clicked on auto fill out input
 * v1.2 - Modified ajax call to use UTSDK.AJAX
 * v1.3 - Revert v1.1 so that result clicked on redirect to that event page
 * v1.4 - Enabled user to press enter to search and prevented ajax calls if the
 *        input value did not change (e.g. shift pressed)
 * v1.5 - Change ajax json key parameter to search rather than eventName incase
 *        search.php is updated to return other results.
 * v1.6 - Made apecifying the result container optional
 * v1.7 - Add check to stop searching if search input is empty
 * 
 * @param {element} elem - the search result element
 * @param {element} input - the search input element
 */
UTSDK.search = function(input, elem) {
    var _this = this;
    var _input = input;
    var _oldValue;
    var _container = elem;
    if (!_container) { //if elem isn't specified
        _container = document.createElement("DIV");
        _input.parentElement.appendChild(_container);
    }

    /* Import search style */
    UTSDK.addStylesheet("search.css");
    UTSDK.addClass(_container, "search");
    //turn off auto-complete as it covers retults
    _input.setAttribute("autocomplete", "off");

    /**
     * Adds a event listener for key down events.  When a key is pressed, the
     * input value is checked against fields in the database and matching fields
     * are returned and displayed
     */
    _input.addEventListener("keyup", function(evt) {
        if (evt.keyCode === 13) { //enter: redirect to event.php?search=_input.value
            _this.submit();
            return;
        }
        if (_oldValue === _input.value) // Stops unneccessary requests
            return;
        else
            _oldValue = _input.value;

        var filter = _input.value;
        if (filter.length !== 0) {
            //Send the input value to search.php and process the result
            UTSDK.AJAX.get("search.php", {"search": filter}, function(responce) {
                if (responce === "Null") {
                    _container.innerHTML = "";
                    hide();
                }
                else {
                    _container.innerHTML = responce;
                    show();
                }
            }, true);
        }
        else { //input value is empty
            _container.innerHTML = "";
            hide();
        }
    });

    /**
     * When there is a result returned from the ajax call, display the result and
     * ensure the result container is in the correct location
     */
    function show() {
        var rect = _input.getBoundingClientRect();
        _container.style.left = rect.left - 1 + "px";
        _container.style.top = rect.bottom + "px";
        _container.style.width = rect.width - 1 + "px";

        if (_container.style.display === "" || _container.style.display === "none")
            UTSDK.fadeIn(_container, 0.01);
    }

    /**
     * Hide the result container when there are no results
     */
    function hide() {
        UTSDK.fadeOut(_container, 0.01);
    }

    /**
     * When enter is pressed, search for matching results
     */
    this.submit = function() {
        if (_input.value !== "")
            UTSDK.redirect("viewevent.php?search=" + _input.value);
    };
};


